<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        strong{
            width: 200px;
            height: 100px;
            background: pink;
            display: block;
        }
        .red{
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 一个vue组件就是一个Vue实例 -->
        <!--vTest.$on("click",handleDamu)-->
        <v-test @click="handleDamu" a="a" b="b" class="red"></v-test>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //组件上的所有事件都是vue自定义事件
    Vue.config.productionTip = false;
    Vue.component("v-test", {
        props:["a","b"],
        //如果v-on使用在普通的html标签上 则代表给当前节点注册dom事件!
        template: "<div><strong @click='handleClick'>v-test</strong> <i>xxx</i></div>",
        methods:{
            handleClick(){
                console.log("handleClick from v-test",this.a,this.b,this.toString());
                this.$emit("click")
            }
        }
    })

    new Vue({
        el: "#app",
        methods: {
            handleDamu(){
                console.log("handleDamu from app")
            }
        }
    })
</script>

</html>